// 工区设施投入对比图 柱状图
import type { DatasetMatrixChartDataListType } from './typings'
import { defineComponent, reactive, onMounted, watch, markRaw } from 'vue'
import * as echarts from 'echarts'
import styles from '~/pages/assetOverview/index.module.scss'

export default defineComponent({
  name: 'AssetOverViewBarChart1',
  props: ['dataList', 'id'],
  setup(
    props: { dataList: any; id: string } = {
      dataList: [],
      id: 'contents'
    }
  ) {
    const state = reactive<DatasetMatrixChartDataListType>({
      // 图表数据
      dataset: {
        source: []
      },
      barSeries: []
    })

    watch(
      () => props.dataList,
      () => {
        barInit()
      }
    )

    onMounted(() => {
      setTimeout(() => {
        barInit()
      }, 1000)
      createBarInit()
    })

    // methods
    // 初始化echarts实例
    const createBarInit = () => {
      const dom = document.getElementById(props.id)
      state.myChart = markRaw(echarts.init(dom!))
      barInit()
    }

    // 绘图
    const barInit = () => {
      // 绘制图表 柱宽不定
      state.myChart.clear()
      state.myChart.setOption({
        color: ['#c4a6ff', '#1cebd4', '#65afff'],
        legend: {
          // 小注释
          itemHeight: 14,
          itemWidth: 14,
          icon: 'roundRect',
          x: 'right',
          y: 'top',
          top: 26,
          left: '12%'
        },
        grid: {
          // top: '20%',
          width: '88%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          enterable: true, // 鼠标是否可进入提示框浮层中
          hideDelay: 200, // 浮层隐藏的延迟
          confine: true, // 提示框 不限制必须在框内
          extraCssText: 'box-shadow: 0 0 3px rgba(150,150,150, 0.7);',
          textStyle: {
            fontSize: 12
          }
        },
        // dataset: state.dataset,
        dataZoom: [
          {
            show: true,
            realtime: true,
            // start: 30,
            // end: 70,
            xAxisIndex: [0, 1]
          },
          {
            type: 'inside',
            realtime: true,
            // start: 30,
            // end: 70,
            xAxisIndex: [0, 1]
          }
        ],
        xAxis: {
          type: 'category',
          data: props.dataList.xAxis,
          axisLabel: {
            // 轴字
            textStyle: {
              color: 'gray'
            }
          },
          axisLine: {
            // 轴线
            show: true,
            lineStyle: {
              color: 'lightGray'
            }
          },
          axisTick: {
            // 刻度
            show: false
          }
        },
        yAxis: {
          minInterval: 1,
          name: '数量',
          nameTextStyle: {
            color: 'gray'
          },
          axisLabel: {
            textStyle: {
              color: 'gray'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'lightGray'
            }
          }
        },
        barWidth: 33,
        series: [
          {
            type: 'bar',
            data: props.dataList.ydata
          }
        ]
      })

      // 建议加上以下这一行代码，不加的话，当浏览器窗口缩小时，超过div界限
      window.addEventListener('resize', function () {
        state.myChart.resize()
      })
    }

    return () => (
      <div class={styles['bar-chart']}>
        <div id={props.id} class={styles['statistics-map']}></div>
      </div>
    )
  }
})
